<template>
    <div class="now">
      <ul>
          <li v-for=" item in nowPlayDate" :key='item.id'>
               <div class="first">
                   <img :src='"/images/"+item.img' alt="">
               </div>
               <div class="second">
                   <p class="title">{{item.title}}</p>
                   <p><span class="font-color">观众评论</span><span class="score">{{item.score}}</span></p>
                   <p class="actors font-color">{{item.actor}}</p>
                   <p class="font-color">{{item.times}}</p>
               </div>
               <div >
                   <button>购票</button>
               </div>
          </li>      
      </ul>
    </div>
</template>

<script>
export default {
 name:'Now',
 data(){
     return{
         nowPlayDate:[]
     }
 },
 methods:{
     getMovie(){
        this.$axios.get('/mock/movieapi.json')
    .then((res)=>{
           console.log(res);
           if(res.status==200){
               this.nowPlayDate=res.data.nowPlayDate
           }
    }) .catch( (error) =>{
    console.log(error);
    });
     }
 },
   created(){
    this.getMovie()
    },
}
</script >

<style scoped>
  .now{
      width: 100%;
      margin-bottom: 35px;
  }
  img{
      width: 80px;
  }
  li{
      padding: 8px;
      overflow: hidden;
      border-bottom: 1px solid #ccc;
      
  }
 div{
     float:left;
 }
 .first{
     width: 25%;
 }
 .second{
     width:60%;
 }
 .actors{
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 }
 .title{
     font-size: 20px;
     font-weight: bold;
 }
 p{
     line-height: 25px;
 }
 .font-color{
      color:#666
 }
 .score{
     color: #F90;
     margin-left: 5px;
   font-weight: bold;
 }
 button{
     background: #E54847;
     border: none;
     border-radius: 5px;
     width: 50px;
     height: 30px;
     color:white
 }
</style>